<template>
  输入<input type="text" v-model="txt" /><br />
  同步<input type="text" v-model="txt" />
</template>

<script>
//2022.09.10    00:08
//https://www.bilibili.com/video/BV1Zy4y1K7SH?p=162&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

//shallowReactive :只处理对象最外层属性的响应式（浅响应式)。
// shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。。什么时候使用?
// 如果有一个对象数据，结构比较深,但变化时只是外层属性变化===> shallowReactive。
// 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef.

import { ref, customRef } from "vue";
export default {
  name: "App",
  setup() {
    let myRef = (val, delay) => {
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            console.log("getmyRef");
            track();
            return val;
          },
          set(newVal) {
            console.log("setmyRef");
            clearTimeout(timer);
            timer = setTimeout(() => {
              val = newVal;
              trigger();
            }, delay);
          },
        };
      });
    };
    // let txt = ref('')
    let txt = myRef("HelloWorld", 500);
    return {
      txt,
    };
  },
};
</script>

<style scoped>
</style>
